<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>ひとなちゃんへの誕生日プレゼント</title>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <style>
      @font-face {
        font-family: "Aa可爱の日系中文2万字";
        src: url("./resources/font/aa.woff");
        font-weight: normal;
        font-style: normal;
      }
      @keyframes appear {
        0% {
          filter: blur(5px);
        }
        100% {
          filter: blur(0);
        }
      }
      * {
        -webkit-tap-highlight-color: transparent;
      }
      body {
        margin: 0;
        padding: 0;
        font-family: "Aa可爱の日系中文2万字";
        font-size: 30px;
        cursor: pointer;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        outline: none;
      }
      .page {
        width: 70%;
        height: 100%;
        display: none;
        animation: appear 2s;
        justify-content: space-around;
        align-items: center;
        position: relative;
      }
      .send-word-page {
        width: 100vmin;
        height: 100vmin;
        display: none;
        animation: appear 3s;
        justify-content: space-around;
        align-items: center;
        position: relative;
      }
      .letter {
        width: 100vmin;
      }
      #toast {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: transparent;
        font-size: 24px;
        /* font-family: "Courier New", Courier, monospace; */
      }
      .toast-content {
        position: absolute;
        width: max-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        color: #000;
        border: 2px solid rgb(5, 207, 183);
        border-radius: 5px;
      }
      .toast-tip {
        margin: 10px 20px 30px 20px;
      }
      .toast-button {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 10px;
        font-size: 18px;
      }
      .toast-button div {
        flex: 1;
        text-align: center;
      }
      @keyframes load {
        0%,
        100% {
          height: 40px;
          background: lightgreen;
        }
        50% {
          height: 70px;
          margin: -15px 0;
          background: lightblue;
        }
      }
      #loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .loading-icon {
        width: 100px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 30px;
      }
      .loading-icon span {
        display: inline-block;
        width: 8px;
        height: 100%;
        border-radius: 4px;
        background: lightgreen;
        -webkit-animation: load 1s ease infinite;
        animation: load 1s ease infinite;
      }
      .loading-icon span:nth-child(2) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
      }
      .loading-icon span:nth-child(3) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
      }
      .loading-icon span:nth-child(4) {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
      }
      .loading-icon span:nth-child(5) {
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
      }
      .loading-tip {
        text-align: center;
        overflow-wrap: break-word;
        font-size: 16px;
        width: 100%;
      }
      .control-bar {
        position: fixed;
        width: 80px;
        top: 20px;
        right: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 99999;
      }
      .bgm-control {
        width: 28px;
        height: 28px;
        display: none;
      }
      .volume {
        font-size: 24px;
      }
      .send-word-container {
        width: 71%;
        height: 90%;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("");
        position: relative;
      }
      .send-word-from {
        position: absolute;
        top: 13%;
        left: 13%;
      }
      .send-word-content-container {
        position: absolute;
        top: 21%;
        left: 16%;
        right: 16%;
        bottom: 8%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
      }
      .send-word-content-container::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      .send-word-content-container::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
        );
      }
      .send-word-content-container::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
        border-radius: 10px;
      }
      .send-word-content-sub {
        margin-top: 20px;
        color: #666;
      }
      .page-info {
        position: fixed;
        bottom: 40px;
        right: 60px;
        font-size: 28px;
        display: none;
      }
      #page-no {
        color: #666;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="page" id="p1">
      <img src="" alt="封筒" class="letter" id="tegami" />
    </div>
    <div id="toast" style="display: none">
      <div class="toast-content">
        <div class="toast-tip"></div>
        <div class="toast-button">
          <div id="toast-confirm">再生</div>
          <div id="toast-cancel">再生しない</div>
        </div>
      </div>
    </div>
    <div id="loading">
      <div class="loading-icon">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="loading-tip">
        最初の読み込みには時間がかかるため、しばらくお待ちください
      </div>
    </div>
    <div class="control-bar">
      <img
        id="bgm-play"
        src="./resources/img/play.png"
        alt="再生"
        class="bgm-control"
      />
      <img
        id="bgm-pause"
        src="./resources/img/pause.png"
        alt="ストップ"
        class="bgm-control"
      />
      <div id="language">あ</div>
    </div>
    <div class="page-info">
      <div id="page-no"></div>
      <div id="pre-page">前へ</div>
    </div>
    <script defer>
      const base64edTegamiData =
        "";
      const base64edDingdong =
        "data:audio/mpeg;base64,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";
      const base64edFanye =
        "data:audio/mpeg;base64,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";
    </script>
    <script defer>
      // 主要数据集
      const dataSet = [
        {
          from: "腹黑伊莉雅",
          cn: "小东生日快乐，不知不觉已经三年了呢。看到喜欢小东的人越来越多我真的非常开心。祝愿小东能一直活跃下去！能认识小东真是太好了。今后也请多多指教！",
          jp: "ひとなちゃん！お誕生日おめでとう！ひとなちゃんが好きな人が増えているのを見て、本当に嬉しかったです。ひとなちゃんがずっと活躍していきますように。ひとなちゃんと出会えて本当によかった。これからもよろしくお願いします！",
        },
        {
          from: "京紫霸权",
          cn: "小东生日快乐！新的一年还会继续支持你，加油",
          jp: "ひとなちゃん！お誕生日おめでとう！新しい一年もひとなちゃんのことを応援し続きます！頑張ってくださいね！",
        },
        {
          from: "素敵",
          cn: "生日快乐！mua！又过了一次16岁生日呢！今后也会一直支持人魚！希望人魚永远幸福！",
          jp: "お誕生日おめでとうございます！mua！また16歳の誕生日が増えましたね！これからも応援します！ひとながずっと幸せになりますように！",
        },
        {
          from: "遠途",
          cn: "小东生日快乐～愿你岁岁平安，永远快乐！我小人鱼会在每个有意义的时刻远隔山海为你应援！一起变成老婆婆也会一直陪着小东！mua！",
          jp: "ひとなちゃんお誕生日おめでとう～ひとなちゃんが平穏な楽しい毎歳が過ごせますように！私小人鱼は毎回意味ある日に、海の向こうでひとなちゃんを応援します！一緒におばあちゃんになってもずっとひとなちゃんのそばにいます！mua！",
        },
        {
          from: "少侠铃儿攻",
          cn: "生日快乐啊！小东，我是因为很喜欢小东翻唱的那些歌曲，才开始日语的学习，是小东让我有了学习日语的动力，并一直坚持了下来。我希望早日可以用日语和小东交流，我会一直支持你的！（不知不觉已经支持小东三年了，看到喜欢小东的人越来越多，我心里感到无比开心，能认识小东真是太好了，谢谢小东 让我平淡无奇的生活有了那道绚丽的色彩，今后也请多多指教）",
          jp: "お誕生日おめでとうだよ！小東ちゃん、私は小東ちゃんのカバーした曲が大好きになったから、日本語を勉強し始めたんだよ！小東ちゃんは私にとってはやる気の源であり、おかげで日本語の勉強が続けられるようになった。私はいつか小東ちゃんと日本语で会話できるようになりたいです！これからもずっと小東ちゃんのことを応援します！(小東ちゃんを応援し始めてからいつの间にかもう三年経ちました。小東ちゃんのことが好きになった人がどんどん増えて、私はこれを目にしてすごく嬉しく思います。小東ちゃんに出会えて本当に良かったです！小東ちゃんは私のこの平凡な無色な生活に色を付けてくれました！本当にありがとう。これからもよろしくお願いします)",
        },
        {
          from: "露雨清尘",
          cn: "生日快乐，今年也要努力当一个家里蹲吗?",
          jp: "お誕生日おめでとう！今歳もスーパーニートになるように頑張るのかな?",
        },
        {
          from: "嘤novation",
          cn: "认识小东已经有三个年头了，时间过得真快啊。能和你相遇，让我感到非常幸福。以后的日子也会一直陪你走下去的。小东酱生日快乐呀！",
          jp: "小東ちゃんと出会ってからもう三年目になりましたよ。時間が経つのは早いものですね！小東ちゃんに出会えて、私はすごく幸せを感じました。これからもずっと小東ちゃんと一緒に歩んでいきたいです。小東ちゃんお誕生日おめでとう！",
        },
        {
          from: "子夜ちゃん",
          cn: "祝小东酱生日快乐！转眼间这已经是你陪伴我们的第三个年头了，时间过得真快呢。很庆幸自己能和你相遇，新的一岁希望你也能天天开心，能够做自己喜欢的事！",
          jp: "小東ちゃんお誕生日おめでとう！小東ちゃんと一緒に過ごす年月はあっという間にもう三年目を迎えました、時間経つのが本当に早いね。小東ちゃんに出会うことは私にとってすごく幸せなことなんです。この新しい歳に小東ちゃんが楽しい毎日を送り、自分が好きなことを一杯できますように！",
        },
        {
          from: "超级无敌昊子",
          cn: "嚣东生日快乐mua~",
          jp: "こーひーお誕生日おめでとうmua～",
        },
        {
          from: "Lnusyaha",
          cn: "嘿嘿嘿…人、人鱼酱…嘿嘿嘿…生、生日快乐…抱、抱歉，搞得、有点像大叔一样的祝福语…不过、接下来也会继续支持妳的！我会继续整活、出大量有趣的视频，如果小东没事做的话记得看一看哦！虽然今年的生日礼物因为大家太忙搁置了，不过确确实实有在完成哦！所以今年至少发一张游戏的CG吧！！",
          jp: "ぐへへへ…ひ、ひとなちゃんだ…お、お誕生日おめでとう…！ご、ごめんね…お祝いの言葉がお、おじさんみたいで…これからも応援するよ！それと、いっぱい面白い動画を作るよ、もし暇だったらぜひ見てみてね！今年の誕生日プレゼントはみんな忙しいから用意できなかったけど、ちゃんと完成するまでちょこちょこ進んでるよ！だから今年はせめてゲームのCG一枚を送ります！",
        },
        {
          from: "宇崎灵",
          cn: "小东生日快乐，不知不觉你已伴我三年了，希望我可以继续看着你快快乐乐的再度过三年",
          jp: "ひとなちゃんお誕生日おめでとう！気づいたらひとなちゃんはもう三年間私の傍にいてくれてたのね。またこんな風にひとなちゃんが楽しく活動してるのを見て三年間を過ごしていきたいです",
        },
        {
          from: "猫贼",
          cn: "小东，祝你生日快乐！无论什么时候都希望你能像过生日一样快乐！小人鱼们会一直喜欢你！",
          jp: "ひとなちゃん、お誕生日おめでとう！ひとなちゃんがいつでも誕生日のように楽しく過ごせて欲しいんです！小人鱼の皆さんはずっとひとなちゃんのことが好きですよ！",
        },
        {
          from: "这个名字运气会好吗",
          cn: "小东！！生日快乐(≧ω≦)/可爱的小东又到了生日了非常的开心 (*^▽^*) 希望小东每天都能开开心心的，有更多的后宫www，早日成为真正的后宫王੭ ᐕ)੭*⁾⁾",
          jp: "ひとなちゃん！！お誕生日おめでとう(≧ω≦)/また可爱いひとなちゃんの诞生日を迎えられてて嬉しいんです(*^▽^*)ひとなちゃんが毎日楽しく過ごせて、そしてハーレムの規模を広げてwww、早いとこ真のハーレム王になることをお祈りしてあげます੭ ᐕ)੭*⁾⁾",
        },
        {
          from: "活着像咸鱼",
          cn: "小东，生日快乐不知不觉已经到三周年了，感谢陪伴。在接下来的时间我会继续支持你的，希望在未来可以继续快快乐乐。",
          jp: "ひとなちゃん、お誕生日おめでとう。いつの間にかもう三回目のお誕生日を迎えることになりますね。今までみんなの傍にいてくれてありがとう！！これからもひとなちゃんを応援し続けます。この先も楽しくやっていけますように。",
        },
        {
          from: "天天吃只会胖",
          cn: "生日快乐生日快乐呀鱼宝～不知不觉又到了鱼宝生日了，鱼宝又长大一岁了，小人鱼也是www不管是多少年都会陪着你一起创造回忆～冲鸭",
          jp: "お誕生日おめでとおおひとなたん～知らないうちにまたひとなたんの誕生日がやってきたね。ひとなたんはまた一つ大人になった！小人鱼達もだけどｗｗｗこれから何年もひとなたんと一緒に思い出を作ろう～いくぞ",
        },
        {
          from: "椎名真昼",
          cn: "生日快乐，才不是因为喜欢小东才来祝福的呢，绝对不是（傲娇",
          jp: "お誕生日おめでとう！べ、別にこっひーのことが好きだからお祝いしに来たわけじゃないんだからね（ツンデレ",
        },
        {
          from: "アオコ",
          cn: "祝小东生日快乐！！不知不觉已经第三年了呢。去年因为工作的原因没什么机会看直播，但是在闲下来的时候我会看录像哦( ◠‿◠ )，我会一直支持小东的！要加油哦。",
          jp: "ひとなちゃん、誕生日おめでとう！！！ いつのまにかもう3年目になったね。去年から仕事の都合で配信はなかなか見られなかったが、暇さえあればアーカイブ観ってたよ( ◠‿◠ )これからもずっと応援するよ！頑張ってね！",
        },
        {
          from: "AE86 Trueno",
          cn: "要我下一千万打赌也行，现当下速度最快的就是小东人魚的８６！只要是最喜欢的小东人魚乘上来不管多快都飞给你看！",
          jp: "一千万賭けてもいいんだぞ　下りなら今最速のは　小東ひとなのハチロクだ。大好きな小東ひとなさんが乗ればいくらでもはやく飛ばせ",
        },
        {
          from: "金田一耕助Official",
          cn: "小东酱，生日快乐。不知不觉已经是第三次生日了呢，给大家带来快乐的人鱼酱我最喜欢了！祝小东可以一直可爱下去，之后也请多多关照啦！",
          jp: "こひちゃん、お誕生日おめでとう。気づいたらもう3回目の誕生日だね、みんなに喜びをもたらしたこひちゃんが大好きだよ！いつまでも可愛くいられますように、これからもよろしくね！",
        },
        {
          from: "路过的34酱",
          cn: "生日快乐！小东！和你相遇，真是太好了 。春、夏、秋、冬，想和你度过所有美丽至极的季节，谢谢你！",
          jp: "お誕生日おめでとう！ひとなちゃんに本当に出会えてよかった。春夏秋冬、いつまでもひとなちゃんと共にこの美しい季節たちを過ごしたいです。いつもありがとう！",
        },
        {
          from: "八方旅者岸玖",
          cn: "小东生日快乐~感谢这段时间的陪伴，希望以后也能安安心心陪着你，打游戏能轻易上手光速通关！",
          jp: "こっひーお誕生日おめでとう！今まで隣にいてくれてありがとう。これからも落ち着いてこっひーの傍にいられますように。そしてこっひーがどんなゲームでもすぐ上達できて、光の速さでクリアできますように！",
        },
        {
          from: "天使の彫像",
          cn: "人鱼生日快乐！和你在一起的三年都很开心，如果人鱼的梦想是成为偶像的话，现在已经很成功了！希望以后一直可以看到人鱼的直播！",
          jp: "ひとなちゃんお誕生日おめでとう！ひとなちゃんと一绪に過ごしてきた三年間ずっと楽しかったです。もしひとなちゃんの梦はアイドルになることでしたら、今はもう十分達成したと思いますよ！これからもずっとひとなちゃんの配信が見れるといいですね！",
        },
        {
          from: "花寄カフェの店長",
          cn: "小东生日快乐！！一起走过了这么多时光，这次生日也要开心哦。今后也要一起走下去，一起度过更多快乐时光，一起享受直播。",
          jp: "こっひーお誕生日おめでとう！たくさんの時間を一緒に過ごしてきたね。今回のお誕生日も是非楽しく過ごそう。これからも一緒に歩んで、一緒に楽しい時間を過ごして、一緒に配信を楽しんでいきましょう。",
        },
        {
          from: "无心",
          cn: "祝小东生日快乐。",
          jp: "ひとなちゃんお誕生日おめでとうございます。",
        },
        {
          from: "花丸家的小橘子",
          cn: "祝小东生日快乐！喜欢小东已经快3年了，看着小东的朋友越来越多，真的很替小东开心呢（可恶，为什么不能独占小东啊！）愿小东像锦鲤一样好运连连mua～",
          jp: "ひとなちゃんお誕生日おめでとう！ひとなちゃんが好きになってからもうすぐ3年になりますね。ひとなちゃんの友達が増えているのを見て、心から嬉しく思います(クッソ！、何故ひとなちゃんを独り占めしちゃいけないんだよ！)ひとなちゃんが錦鯉みたいに幸運がありますように～mua～",
        },
        {
          from: "lllllllllllllhh",
          cn: "东东生日快乐！！muaヾ(๑╹ヮ╹๑)ﾉ”！！！不知不觉认识东东已经快三年肋，希望东东  I 的地方能变大捏！",
          jp: "こっひーお誕生日おめでとう！muaヾ(๑╹ヮ╹๑)ﾉ”！！！気づけばこっひーを知ってからすぐ3年が経ちますね。こっひーのぺたんこなところが大きくなりますように～！",
        },
        {
          from: "零川",
          cn: "小东生日快乐！！(*¯︶¯*)感谢一直以来的陪伴，今后也会一直喜欢小东。（贴贴！）",
          jp: "こっひーお誕生日おめでとうございます！(*¯︶¯*)ずっと傍にいてくれてありがとう！これからもずっとこっひーが好きだよ。(てぇてぇ！)",
        },
        {
          from: "无枝",
          cn: "小東生日快乐捏，一想到小東已经陪我们走过了三年，就有一种想把小東独吞的想法（不是），真希望小東能跟我一起白头偕老，所以小東什么时候才能和我结婚捏",
          jp: "こっひーお誕生日おめでとう！もう三年間一緒に歩んできたと思うと、ついついこっひーを独り占めしたくなっちゃう、もとい、こっひーと添い遂げたくなる…ってなわけでこっひーはいつ僕と結婚するのかな？",
        },
        {
          from: "彩虹",
          cn: "祝小東生日快乐！希望以后能听到小東唱更多好听的歌也希望小東每天都开开心心身体健健康康的，那么今后也请多多关照| ᴥ•́ )✧",
          jp: "こっひーお誕生日おめでとう！これからもこっひーの素敵な歌をたくさん聴きたいし、こっひーが毎日を健康で楽しく過ごせたらいいなと思います。では今後もよろしくお願いします| ᴥ•́ )✧",
        },
        {
          from: "夕仁",
          cn: "春有飞雪夏有雨，秋有狂风冬有晴。一年里有那么多的意外，最迷人的却是在合适的时节遇上了最好的你。祝小东第３次的１６岁生日快乐～新的１岁也请多多指教～",
          jp: "春に雪夏に雨、秋には強風が、冬にも晴れる日が来る。一年中こんなに沢山のハプニングが起こるけど、最も魅力的なことはこの良い季節に最高のあなたに出会ったことです。小東3回目の16歳のお誕生日おめでとうございます～新しい1歳もよろしくお願いします～",
        },
        {
          from: "小萌神Yuuki",
          cn: "小东生日快乐～   能遇见小东真的是太棒了！也祝愿小东在新的一年里开开心心，天天幸运～",
          jp: "こっひーお誕生日おめでとう～こっひーに出会えて本当に良かった！これからの一年はこっひーにとって幸運に恵まれる楽しい一年になりますように～",
        },
        {
          from: "SOS副团",
          cn: "小东生日快乐！希望人鱼永远快乐幸福！快乐直播！快乐生活！mua！mua！",
          jp: "こっひーお誕生日おめでとう！こっひーがずっとずっと幸せでいてほしい！楽しく配信して、楽しく毎日を送ってね！mua！mua！",
        },
        {
          from: "Field白",
          cn: "祝全世界最可爱的小东公主生日快乐！今后不论贫富贵贱，生老病死都会永远单推小东！小东就是我们的光！",
          jp: "世界で一番かわいい小東姫のお誕生日おめでとうございます! これからは貧困生死を問わず永遠に東ちゃんを単押しし続きます！ 東ちゃんは私たちの光です!",
        },
        {
          from: "巧克力味の冰激凌",
          cn: "小东，生日快乐呀！不知不觉已经喜欢你好久了，希望以后也能一直一起走下去，一直快快乐乐！mua～",
          jp: "こっひーお誕生日おめでとう！気づいたらこっひーが好きになってから随分長い時間が経ちましたね。これからもずっと共に歩んでいき、楽しくやっていきましょう！mua～",
        },
        {
          from: "绿杨桃y",
          cn: "小东生日快乐哦！遇见小东的第三年啦!每次看小东的直播都很开心，投稿的歌曲也有在反复听(根本停不下来，特别是《心做し》！希望努力，温柔的小东也能每天开心!最后祝小东——平安顺遂！",
          jp: "こっひーお誕生日おめでとう！！こっひーと出会った3年目ですね！こっひーの配信を見るたびに楽しくて、投稿した曲も何度も聴いていました（全然止まれない、特には『心做し』です！）頑張り屋さんで、優しいこっひーが毎日楽しく過ごせますように！最後にひとなちゃんのこれからは順風満帆でありますように!",
        },
        {
          from: "褋祈",
          cn: "小东生日快乐！时间过得好快，这已经是小东和大家一起庆祝的第三个16岁生日了呢，祝你每天都开心快乐，永远可爱迷人。",
          jp: "こっひーお誕生日おめでとう！これはもうこっひーがみんなと一緒に祝う3回目の16歳の诞生日かぁ、時間経つのは早いですね。毎日が楽しく送れますように、そして永遠にかわいくて魅力的でありますように。",
        },
        {
          from: "优雅猛牛",
          cn: "小东生日快乐~",
          jp: "ひとなちゃんお誕生日おめでとうございます～",
        },
        {
          from: "最佳kz",
          cn: "小东生日快乐！最近因为学习的原因，很少看直播了，但是我会一直关注你，请继续坚持下去吧，希望你的人生会更加的幸福快乐！之前看到小东很喜欢玩我的世界，所以我就在游戏里建了一些东西，感兴趣的话可以看一看。",
          jp: "ひとなちゃんお誕生日おめでとう！最近勉強が忙しくて、あんまり配信を見れてないけど、ずっとひとなちゃんのことを注目してるよ！これからも活動を続けてください！ひとなちゃんの人生が更に楽しく幸せでありますように！前にひとなちゃんが「マイクラ」にハマってるのを見て、マイクラで色々を作ったので、興味があれば是非ひとなちゃんに見てほしいです！",
        },
        {
          from: "菓籽",
          cn: "小东生日快乐！关注小东快一年啦，虽然时间不长，但小东的投稿、直播都为我带来了不少快乐！能与你相遇真是太好啦！祝你快快乐乐~事事顺利~",
          jp: "こっひーお誕生日おめでとうございます！チャンネル登録を押してからもうすぐ1年が経ちますね。時間は長くありませんが、こっひーの投稿と配信は私にたくさんの喜びをもたらした。君に出会えてよかった！毎日が楽しく送れ、何事も順調に行けますように～",
        },
        {
          from: "風龍",
          cn: "小东生日快乐！希望小东可以继续高兴的直播，增加联动的机会，成为名副其实的后宫王！",
          jp: "こっひーお誕生日おめでとうございます！こっひーがこれからも楽しく配信ができ、より多くのコラボに参加し、真のハーレム王になることを願っています！",
        },
        {
          from: "暗夜彡虚空",
          cn: "小东生日快乐呀~！从认识人鱼到现在已经快3年了。鱼宝都已经过了第3个16岁生日了呢。谢谢人鱼直播给我带来的快乐，还有各种动听的翻唱。希望小人鱼能一直陪你走下去，祝你每天开心，一直可爱迷人~",
          jp: "こっひーお誕生日おめでとうございます！こっひーを知ってからもうすぐ3年になり、これでもう3回目の16歳の誕生日ですね。こっひーの配信と素敵な歌動画の数々に喜びをもたらしたことを感謝していますよ。小人魚のみんなとずっと一緒に歩んでいけるといいね。毎日が楽しく送れますように、そしてずっと可愛くいられますように～",
        },
        {
          from: "平川",
          cn: "小東生日快樂！ 祝小東和每年陪東一起過生日的朋友們：年年有魚～謝謝大家。",
          jp: "こっひーお誕生日おめでとうございます！こーひーと毎年こーひーと一緒に誕生日を過ごすみんなへ：毎歳は生活に余裕ができますように～ありがとうございました。（中国にはこういうことわざがあり、そして余裕を表す「余yu」と魚の「鱼yu」は同じ発音）",
        },
        {
          from: "忌憚",
          cn: "小！東！生！日！快！樂！ mau~",
          jp: "小！東！お！誕！生！日！お！め！で！とーー！mau~",
        },
        {
          from: "五更耗纸",
          cn: "生日快乐！祝小东在之后的日子里也能开开心心地渡过每一天。",
          jp: "こっひーお誕生日おめでとう！これからも毎日を楽しく過ごせますように。",
        },
        {
          from: "夢七未",
          cn: "小东生日快乐！mua~",
          jp: "ひとなちゃんお誕生日おめでとうございます！mua~",
        },
        {
          from: "律シン",
          cn: "到了我这里能说的祝福语都已经被大家说的差不多了ww我太笨了想不到什么新的祝福语啦！不过对鱼宝的喜爱之情和祝福之意是跟大家一样的，所以不用说也肯定也已经传达到鱼宝那了吧！ww现在鱼宝肯定被大家MUA的一脸口水吧ww给纸巾~不过还是再次祝贺鱼宝生日快乐！今后也请多指教啦~",
          jp: "おれの番になるとひとなちゃんはもうみんなに一杯お祝いの言葉を言われたんだろうｗｗなんか斬新な一言を送りたいけどおればかだからなんも思いつかないや！まっでもひとなちゃんに対する好きな気持ちや祝福したい気持ちもみんなと同じだから、言わなくてもひとなちゃんには伝わってるっしょ！ｗｗ今ひとなちゃんはきっとみんなに沢山ブッチュされて顔中によだれまみれであろうｗはいティッシュ～ここで改めてひとなちゃんお誕生日おめでとっ！これからもよろしくな～",
        },
      ];
      const languageSet = {
        jp: {
          title: "ひとなちゃんへのお誕生日プレゼント",
          askConfirm: "確認してください",
          confirm: "確認",
          cancel: "キャンセル",
          askBgm: "bgmを再生ますか？",
          play: "再生",
          notPlay: "再生しない",
          pause: "ストップ",
          loadingTip:
            "最初の読み込みには時間がかかるため、しばらくお待ちください",
          prePage: "前へ",
        },
        cn: {
          title: "小东的生日礼物",
          askConfirm: "请确认",
          confirm: "确认",
          cancel: "取消",
          askBgm: "是否要播放bgm呢？",
          play: "播放",
          notPlay: "不播放",
          pause: "暂停",
          loadingTip: "第一次加载可能耗时较长，请耐心等候",
          prePage: "返回上一页",
        },
      };
    </script>
    <script defer>
      // 常量信息
      const localStorageLanguageKey = "hitonahenotegami_2022_lang";
      // 中日文状态
      let currentIsJp = /(^jp.*)|(^ja.*)/i.test(
        localStorage.getItem(localStorageLanguageKey) || navigator.language
      );
      // 工具函数
      const totalPage = dataSet.length + 1;
      function getFixedPageNo(nextPage, isIniting, onEnd) {
        if (nextPage <= 0) {
          return 1;
        }
        if (nextPage > totalPage) {
          return (onEnd && !isIniting && onEnd()) || 1;
        }
        return nextPage;
      }
      // loading最早出现所以对loading进行特殊处理
      const loadingDOM = document.getElementById("loading");
      loadingDOM.children[1].innerHTML =
        languageSet[currentIsJp ? "jp" : "cn"].loadingTip;
      let isLoading = true;
      // toast逻辑
      const toastDOM = document.getElementById("toast");
      function toast(tip, confirm, cancel, onConfirm, onCancel) {
        const tipDOM = document.getElementsByClassName("toast-tip")[0];
        const confirmDOM = document.getElementById("toast-confirm");
        const cancelDOM = document.getElementById("toast-cancel");
        tipDOM.innerHTML =
          tip || languageSet[currentIsJp ? "jp" : "cn"].askConfirm;
        confirmDOM.innerHTML =
          confirm || languageSet[currentIsJp ? "jp" : "cn"].confirm;
        cancelDOM.innerHTML =
          cancel || languageSet[currentIsJp ? "jp" : "cn"].cancel;
        confirmDOM.onclick = function () {
          onConfirm && onConfirm();
          toastDOM.style.display = "none";
        };
        cancelDOM.onclick = function () {
          onCancel && onCancel();
          toastDOM.style.display = "none";
        };
        toastDOM.style.display = "block";
      }
      // 页面控制
      let currentPage = 1;
      const pageNoDOM = document.getElementById("page-no");
      const pageInfoDOM = document.getElementsByClassName("page-info")[0];
      function applyPage(pno) {
        document.getElementById("p" + currentPage).style.display = "none";
        currentPage = pno;
        document.getElementById("p" + pno).style.display = "flex";
        if (pno === 1) {
          pageInfoDOM.style.display = "none";
        } else {
          pageNoDOM.innerHTML = `${pno - 1}/${totalPage - 1}`;
          pageInfoDOM.style.display = "flex";
        }
      }
      const prePageDOM = document.getElementById("pre-page");
      prePageDOM.addEventListener(
        "click",
        (e) => {
          fanye.play();
          const nextPage = getFixedPageNo(currentPage - 1, false);
          console.log(nextPage);
          applyPage(nextPage);
          e.stopPropagation();
        },
        false
      );
      // toast事件冒泡拦截
      document.getElementById("toast").addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
        },
        false
      );
      // bgm控制
      const bgm = new Audio("./resources/music/bgm.mp3");
      // 音量50%
      bgm.volume = 0.22;
      // 循环播放
      bgm.loop = true;
      let isBGMPlaying = false;
      const bgmPlayButton = document.getElementById("bgm-play");
      const bgmPauseButton = document.getElementById("bgm-pause");
      function playBGM() {
        bgmPlayButton.style.display = "none";
        bgmPauseButton.style.display = "inline-block";
        isBGMPlaying = true;
        return bgm.play();
      }
      bgmPlayButton.addEventListener(
        "click",
        (e) => {
          playBGM();
          e.stopPropagation();
        },
        false
      );
      bgmPauseButton.addEventListener(
        "click",
        (e) => {
          bgm.pause();
          bgmPlayButton.style.display = "inline-block";
          bgmPauseButton.style.display = "none";
          isBGMPlaying = true;
          e.stopPropagation();
        },
        false
      );
      const dingdong = new Audio(base64edDingdong);
      dingdong.volume = 0.25;
      const fanye = new Audio(base64edFanye);
      let isInitToasted = false;
      let isInitToasting = false;
      // 生成寄语列表
      const languageDOM = document.getElementById("language");
      const sendWordDOMS = dataSet.map((item, index) => {
        const page = document.createElement("div");
        page.id = `p${index + 2}`;
        page.className = "send-word-page";
        const nameDOM = document.createElement("div");
        nameDOM.innerHTML = `${item.from}：`;
        nameDOM.className = "send-word-from";
        const contentMainDOM = document.createElement("div");
        contentMainDOM.innerHTML = currentIsJp ? item.jp : item.cn;
        contentMainDOM.className = "send-word-content-main";
        const contentSubDOM = document.createElement("div");
        contentSubDOM.innerHTML = currentIsJp ? item.cn : item.jp;
        contentSubDOM.className = "send-word-content-sub";
        const container = document.createElement("div");
        container.className = "send-word-container";
        const contentContainer = document.createElement("div");
        contentContainer.className = "send-word-content-container";
        container.appendChild(nameDOM);
        contentContainer.appendChild(contentMainDOM);
        contentContainer.appendChild(contentSubDOM);
        container.appendChild(contentContainer);
        page.appendChild(container);
        document.body.insertBefore(page, toastDOM);
        return page;
      });
      // loading逻辑
      let bgmReady = false;
      let fontReady = false;
      function afterInit() {
        applyPage(currentPage);
        isInitToasted = true;
        isInitToasting = false;
        document.body.addEventListener(
          "click",
          () => {
            fanye.play();
            const nextPage = getFixedPageNo(
              currentPage + 1,
              false,
              function onEnd() {
                if (isBGMPlaying) {
                  bgm.currentTime = 0;
                  playBGM();
                }
                return 1;
              }
            );
            applyPage(nextPage);
          },
          false
        );
      }
      function checkIsAllReady() {
        if (fontReady && bgmReady) {
          loadingDOM.style.display = "none";
          if (!isInitToasted) {
            isInitToasting = true;
            toast(
              languageSet[currentIsJp ? "jp" : "cn"].askBgm,
              languageSet[currentIsJp ? "jp" : "cn"].play,
              languageSet[currentIsJp ? "jp" : "cn"].notPlay,
              async () => {
                await dingdong.play();
                setTimeout(async () => {
                  await playBGM();
                  afterInit();
                }, 1000);
              },
              async () => {
                await dingdong.play();
                isBGMPlaying = false;
                bgmPlayButton.style.display = "inline-block";
                bgmPauseButton.style.display = "none";
                afterInit();
              }
            );
          }
        }
      }
      bgm.oncanplaythrough = function () {
        bgmReady = true;
        checkIsAllReady();
      };
      document.fonts.ready.then(() => {
        fontReady = true;
        checkIsAllReady();
      });
      // 多语言
      const tegami = document.getElementById("tegami");
      function applyLanguage(isJp) {
        if (isJp) {
          languageDOM.innerHTML = "中";
          sendWordDOMS.forEach((item, index) => {
            item.children[0].children[1].children[0].innerHTML =
              dataSet[index].jp;
            item.children[0].children[1].children[1].innerHTML =
              dataSet[index].cn;
          });
          document.title = languageSet.jp.title;
          tegami.src = base64edTegamiData;
          prePageDOM.innerHTML = languageSet.jp.prePage;
          loadingDOM.children[1].innerHTML = languageSet.jp.loadingTip;
          currentIsJp = true;
          localStorage.setItem(localStorageLanguageKey, "jp");
        } else {
          languageDOM.innerHTML = "あ";
          sendWordDOMS.forEach((item, index) => {
            item.children[0].children[1].children[0].innerHTML =
              dataSet[index].cn;
            item.children[0].children[1].children[1].innerHTML =
              dataSet[index].jp;
          });
          document.title = languageSet.cn.title;
          tegami.src = "./resources/img/tegami_cn.png";
          prePageDOM.innerHTML = languageSet.cn.prePage;
          loadingDOM.children[1].innerHTML = languageSet.cn.loadingTip;
          currentIsJp = false;
          localStorage.setItem(localStorageLanguageKey, "cn");
        }
        if (isInitToasting) {
          checkIsAllReady();
        }
      }
      languageDOM.addEventListener(
        "click",
        (e) => {
          applyLanguage(!currentIsJp);
          e.stopPropagation();
        },
        false
      );
      applyLanguage(currentIsJp);
    </script>
  </body>
</html>
